<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="./src/assets/favicon.ico" type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>giao~</title>
    <meta name="description" content="lcp的个人博客，分享技术文章、学习心得和生活随想">
    <meta name="keywords" content="Vue,React,JavaScript,前端开发,Web开发,技术博客">
    <meta name="author" content="lcp">

    <!-- 添加颜色主题meta标签 -->
    <meta name="color-scheme" content="light dark">
    <meta name="theme-color" content="#f8f9fa" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">

    <!-- 预加载字体 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

    <!-- Open Graph -->
    <meta property="og:title" content="lcp's Blog">
    <meta property="og:description" content="You Only Live Once.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://lcp.com">
    <meta property="og:image" content="https://lcp.com/og-image.jpg">



    <style>
      /* 初始样式，防止主题切换闪烁 */
      html, body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      *, *::before, *::after {
        box-sizing: inherit;
      }

      /* 防止主题切换时的闪烁 */
      html {
        transition: background-color 200ms ease;
      }

      /* 初始加载时的预载样式 */
      html.dark-theme {
        background-color: #121212;
        color: #e5e7eb;
      }

      html:not(.dark-theme) {
        background-color: #f8f9fa;
        color: #333333;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
